<template>
  <div class="thiscontainer">
    <el-tabs type="border-card">
      <el-tab-pane label="操作日志">
        <el-form size="mini" :inline="true" :model="operationForm">
          <el-form-item label="操作类型：">
            <el-input clearable placeholder="" style="width: 300px" v-model="operationForm.type"></el-input>
          </el-form-item>
          <el-form-item label="操作内容：">
            <el-input clearable placeholder="" style="width: 300px" v-model="operationForm.content"></el-input>
          </el-form-item>
          <el-form-item label="操作人：">
            <el-input clearable placeholder="" style="width: 300px" v-model="operationForm.created_user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="getOperationDataList()" icon="el-icon-search" type="primary">查询</el-button>
            <el-button size="mini" @click="refOperationDataList()" icon="el-icon-refresh" type="primary">重置</el-button>
            <el-button size="mini" @click="clearBtn(1)" type="danger" v-if="Jurisdictionlist.indexOf('Delete') > -1">清空</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="operationLogData" size="mini" border ref="table" style="width: 100%" v-loading="operationLogDataLoading">
          <el-table-column align="center" header-align="center" label="序号" prop="typeName" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="操作类型" prop="types"></el-table-column>
          <el-table-column align="center" header-align="center" label="操作内容" prop="content"></el-table-column>
          <el-table-column align="center" header-align="center" label="操作人" prop="created_user"></el-table-column>
          <el-table-column align="center" header-align="center" label="创建时间" prop="created_time"></el-table-column>
        </el-table>
        <el-pagination small :current-page="pageIndex" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :total="totalPage" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 10px"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="登录日志">
        <el-form size="mini" :inline="true" :model="loginForm">
          <el-form-item label="登录账号：">
            <el-input clearable placeholder="" style="width: 300px" v-model="loginForm.account"></el-input>
          </el-form-item>
          <el-form-item label="登录IP：">
            <el-input clearable placeholder="" style="width: 300px" v-model="loginForm.loginIP"></el-input>
          </el-form-item>
          <el-form-item label="登录地区：">
            <el-input clearable placeholder="" style="width: 300px" v-model="loginForm.loginArea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="getOperationDataList2()" icon="el-icon-search" type="primary">查询</el-button>
            <el-button size="mini" @click="refOperationDataList2()" icon="el-icon-refresh" type="primary">重置</el-button>
            <el-button size="mini" @click="clearBtn(2)" type="danger" v-if="Jurisdictionlist.indexOf('Delete') > -1">清空</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="loginLogData" size="mini" border ref="table" style="width: 100%" v-loading="loginLogDataLoading">
          <el-table-column align="center" header-align="center" label="序号" prop="typeName" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="登录账号" prop="account"></el-table-column>
          <el-table-column align="center" header-align="center" label="登录IP" prop="loginIP"></el-table-column>
          <el-table-column align="center" header-align="center" label="登录地区" prop="loginArea"></el-table-column>
          <el-table-column align="center" header-align="center" label="登录时间" prop="created_time"></el-table-column>
        </el-table>

        <el-pagination small :current-page="pageIndex2" :page-size="pageSize2" :page-sizes="[10, 20, 50, 100]" :total="totalPage2" @current-change="currentChangeHandle2" @size-change="sizeChangeHandle2" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 10px"></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { ClearLogApi, loginLogDataApi, operationLogDataApi } from '../../../api/system'
import { DeleteReserveApi } from '../../../api/qyServer'

export default {
  name: 'LogInfo',
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      operationLogData: [],
      operationForm: {
        type: '',
        content: '',
        created_user: '',
      },
      operationLogDataLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,

      tableHeight: 600,

      loginLogData: [],
      loginForm: {
        account: '',
        loginIP: '',
        loginArea: '',
      },
      loginLogDataLoading: false,
      pageIndex2: 1,
      pageSize2: 10,
      totalPage2: 0,
      Jurisdictionlist: [], // 权限列表
    }
  },
  mounted() {
    this.getOperationDataList()
    this.getOperationDataList2()
    this.Jurisdictionlist = JSON.parse(localStorage.getItem('jurisdiction'))[this.$route.path]
  },
  methods: {
    clearBtn(val) {
      this.$confirm('确认清空日志记录吗? 清空以后将不能再恢复', '提示', {
        type: 'warning',
      })
        .then((res) => {
          let para = { label: val }
          ClearLogApi(para).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.getOperationDataList()
              this.getOperationDataList2()
            }
          })
        })
        .catch(() => {})
    },
    currentChangeHandle2(val) {
      this.pageIndex2 = val
      this.getOperationDataList2()
    },
    sizeChangeHandle2(val) {
      this.pageSize2 = val
      this.pageIndex2 = 1
      this.getOperationDataList2()
    },
    getOperationDataList2() {
      this.loginLogDataLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex2, pageSize: this.pageSize2 }, { search: this.loginForm })
      loginLogDataApi(info)
        .then((res) => {
          this.loginLogData = res.result.items
          this.totalPage2 = res.result.total
          this.loginLogDataLoading = false
        })
        .catch((e) => {
          this.loginLogData = []
          this.totalPage2 = 0
          this.loginLogDataLoading = false
        })
    },
    refOperationDataList2() {
      this.loginForm = {
        account: '',
        loginIP: '',
        loginArea: '',
      }
      this.getOperationDataList2()
    },

    currentChangeHandle(val) {
      this.pageIndex = val
      this.getOperationDataList()
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getOperationDataList()
    },
    refOperationDataList() {
      this.operationForm = {
        type: '',
        content: '',
        created_user: '',
      }
      this.getOperationDataList()
    },
    getOperationDataList() {
      this.operationLogDataLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, { search: this.operationForm })
      operationLogDataApi(info)
        .then((res) => {
          this.operationLogData = res.result.items
          this.totalPage = res.result.total
          this.operationLogDataLoading = false
        })
        .catch((e) => {
          this.operationLogData = []
          this.totalPage = 0
          this.operationLogDataLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.thiscontainer {
}
</style>
